<template>
    <section class="yun_xing_plane">
		<div class="" v-show="showYunxingPlane==='1'">
			<el-form-item label="开始时间:" required>
				<el-time-picker
					format="HH:mm"
					value-format="HH:mm"	
					v-model="form.stratTime"
					:picker-options="{
						selectableRange: '00:00:00 - 23:59:59'
					}"
					placeholder="任意时间点">
				</el-time-picker>	
			</el-form-item>

			<el-form-item label="间隔时间:" required>
				<el-input v-model="form.jiangeHours" type="number" style="width: 220px;"></el-input>&nbsp;&nbsp;分钟
			</el-form-item>

			<el-form-item label="结束时间:" required>
				<el-time-picker
					format="HH:mm"
					value-format="HH:mm"	
					v-model="form.endTime"
					:picker-options="{
						selectableRange: '00:00:00 - 23:59:59'
					}"
					placeholder="任意时间点">
				</el-time-picker>	
			</el-form-item>
		</div>

		<div class="" v-show="showYunxingPlane==='2'">
			<el-form-item label="开始时间:" required>
				<el-time-picker
					format="HH:mm"
					value-format="HH:mm"
					v-model="form.stratTime"
					:picker-options="{
						selectableRange: '00:00:00 - 23:59:59'
					}"
					placeholder="任意时间点">
				</el-time-picker>	
			</el-form-item>

			<el-form-item label="间隔时间:" required>
				<el-input v-model="form.jiangeHours" type="number" style="width: 220px;"></el-input>&nbsp;&nbsp;小时
			</el-form-item>

			<el-form-item label="结束时间:" required>
				<el-time-picker
					format="HH:mm"
					value-format="HH:mm"		
					v-model="form.endTime"
					:picker-options="{
						selectableRange: '00:00:00 - 23:59:59'
					}"
					placeholder="任意时间点">
				</el-time-picker>	
			</el-form-item>
		</div>
				
		<div class="" v-show="showYunxingPlane==='3'">
			<el-form-item label="具体时间:" required>
				<el-time-picker
					format="HH:mm"
					value-format="HH:mm"		
					v-model="form.jutiTime"
					:picker-options="{
						selectableRange: '00:00:00 - 23:59:59'
					}"
					placeholder="具体时间点">
				</el-time-picker>	
			</el-form-item>
		</div>
				
		<div class="" v-show="showYunxingPlane==='4'">
			<el-form-item label="选择时间:" required>
				<el-checkbox-group v-model="form.chooseWeek">
					<el-checkbox-button class="box_checkbox" v-for="(item) in chooseWeek" :label="item.label" :key="item.name">{{item.label}}</el-checkbox-button>
				</el-checkbox-group>
			</el-form-item>
			
			<el-form-item label="具体时间:" required>
				<el-time-picker
					format="HH:mm"
					value-format="HH:mm"	
					v-model="form.jutiTime"
					:picker-options="{
						selectableRange: '00:00:00 - 23:59:59'
					}"
					placeholder="具体时间点">
				</el-time-picker>	
			</el-form-item>
		</div>
				
		<div class="" v-show="showYunxingPlane==='5'">
			<el-form-item label="选择时间:" required>     
				<el-popover
					placement="right"
					width="400"
					v-model="everyMonthVisible"
					trigger="click">
					<el-checkbox-group v-model="everyMonth">
					<el-checkbox class="everyMonth_checkbox" style="width: 60px;margin:10px 0 0 30px;" v-for="(item,index) in everyMonthCheckBox" :label="item.label" :name="item.name" :key="index"></el-checkbox>
					<el-button type="primary"  size="mini" @click="chooseEveryMonth">确定</el-button>
					</el-checkbox-group>
					<el-button slot="reference">
						<span class="everyMonth_span" v-for="(item ,index) in form.everyMonth" :key="index">
							<i class="el-icon-circle-close-outline"></i>
							{{item}}
						</span>
					</el-button>
				</el-popover>
			</el-form-item>
			
			<el-form-item label="具体时间:" required>  
				<el-time-picker
					format="HH:mm"
					value-format="HH:mm"	
					v-model="form.jutiTime"
					:picker-options="{
						selectableRange: '00:00:00 - 23:59:59'
					}"
					placeholder="具体时间点">
				</el-time-picker>	
			</el-form-item>
		</div>
    </section>
</template>

<script>
    import {everyMonthCheckBoxJson,everyWeekCheckBoxJson} from "../../common/js_css_img/jsonDiy"
    export default {
    	props:{
    		showYunxingPlane:'',
    		timeSubmit:Boolean,
    		hassmRunPlan:{
    			type:Object,
    			default: function () {
			   	 	return {}
			  	}
    		}
    	},
        data() {
          return {
          		everyMonthVisible:false,
          		everyMonth:[],
          		form:{
          			endTime:"",
          			stratTime:'',
          			jiangeHours:"",
          			jutiTime:"",
          			chooseWeek:[],
          			everyMonth:[],
          		},
          		smRunPlan:{  
					"runMethod":'',
					"startTime":"",
					"intervalTime":'',  
					"endTime":"",
					"selectTime":'',
				},
          		chooseWeek:everyWeekCheckBoxJson,
          		everyMonthCheckBox:everyMonthCheckBoxJson,
          };
        },
        methods: {
        	chooseEveryMonth(){
        		this.form.everyMonth = this.everyMonth;
        		this.everyMonthVisible =false;
        	}
        },
        watch:{
        	timeSubmit(newVal){
        		this.smRunPlan.runMethod=this.showYunxingPlane;/*运行计划的方式*/
        		this.smRunPlan.startTime=this.form.stratTime||this.form.jutiTime;/*开始时间，具体时间*/
        		this.smRunPlan.intervalTime=this.form.jiangeHours;/*间隔时间*/
        		this.smRunPlan.endTime=this.form.endTime;/*结束时间*/
        		if(this.showYunxingPlane==='4'){/*4类型的具体时间*/
        			this.smRunPlan.selectTime = this.form.chooseWeek.join();
        		}
        		if(this.showYunxingPlane==='5'){/*5类型的具体时间*/
        			this.smRunPlan.selectTime=this.form.everyMonth.map(item=>item.replace(/号/,'')).join();
        		}
        		this.$emit('outPutForm',this.smRunPlan);
        	},
        	hassmRunPlan:{
        		handler(newVal,oldVal){
        			this.form = newVal;
        		},
        		deep:true
        	}
        }
  };
</script>

<style scoped="scoped">
    
</style>